import React from "react";
import pingPP from "pingpp-js";
import {fetchGETWithoutHeader, reset} from "../../actions";
import {connect} from "react-redux";

class dingPay extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            memberId: "",
            money: 0,
            prizeIds: "",
            counts: 0,
            sysType: "",
            chargeType: "",
            charge: "",
            callbackUrl: "",
            firstClick: true,
            display: "none"
        }
    }

    componentWillMount() {
        document.title = "支付订单";
    }

    componentDidMount() {
        const query = this.props.location.query;
        if(query.token) {
            this.setState({
                userToken: query.token,
                amount: query.money,
                callbackUrl: query.callbackUrl
            })
        }
        this.props.dispatch(reset("dingPayCharge"))
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.chargeData.errorCode == 0) {
            this.goPay(nextProps.chargeData.data);
        } else {
            this.setState({
                firstClick: true
            });
        }
    }

    generateCharge() {
        if(this.state.firstClick) {
            this.setState({
                display: ""
            })
            let params = "?userToken=" + this.state.userToken + "&amount=" + this.state.amount + "&payType=3&callbackUrl=" + this.state.callbackUrl;
            this.props.dispatch(fetchGETWithoutHeader("dingPayCharge", params));
            this.setState({
                firstClick: false
            });
        }
    }

    goPay(charge) {
        this.setState({
            firstClick: true
        });
        pingPP.createPayment(charge, function(result, err) {
            if (result == "success") {
                window.location.href = "wx0b39fc1cef394a94://success=1";
               // window.location.href = "/#/ding/paySuccess?amount=" + this.state.amount;
            } else {
                window.location.href = "wx0b39fc1cef394a94://success=0";
            }
        });
        this.props.dispatch(reset("dingPayCharge"))
    }
    render() {
        return (
            <div>
                <div className="dingPayContainer">
                    <div className="payList">
                        <ul>
                            <li> 合计 <i>{this.state.amount}元</i></li>
                            <li> 实际支付 <i>{this.state.amount}元</i></li>
                        </ul>
                    </div>
                    <div className="payList">
                        <ul>
                            <li> 支付方式 </li>
                            <li><span className="logo"></span>支付宝 <i className="gou"></i> </li>
                        </ul>
                    </div>
                    <div className="tips" style={{'display': this.state.display}}>
                        数据正在提交中...
                    </div>
                    <div className="buttonBox bgf"><button className="blueBtn" onClick={this.generateCharge.bind(this)} >确认支付</button></div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    const {postsByApi} = state
    const {
        items: chargeData
    } = postsByApi["dingPayCharge"] || {
        items: {}
    }

    return {
        chargeData
    }
}

export default connect(mapStateToProps)(dingPay);